<template>
    <div class="container">
        <div class="search">
            <el-form ref="searchForm" :model="queryParams" label-width="100px" :inline="true" class="demo-form-inline">
                <el-form-item label="商品名称">
                    <el-input v-model="queryParams.name"></el-input>
                </el-form-item>
                <el-form-item label="商品类型">
                    <el-select v-model="queryParams.cate">
                        <el-option label="宠物" value="0"></el-option>
                        <el-option label="其他" value="1"></el-option>
                        <el-option label="服饰" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品状态">
                    <el-select v-model="queryParams.status">
                        <el-option label="已提交" value="0"></el-option>
                        <el-option label="审核通过" value="2"></el-option>
                        <el-option label="审核不通古" value="3"></el-option>
                        <el-option label="已上架" value="4"></el-option>
                        <el-option label="已下架" value="5"></el-option>
                        <el-option label="强制下架" value="6"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" @click="doGetTableData">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="btns">
            <el-button type="warning" size="mini">批量删除</el-button>
        </div>
        <div class="table">
            <Table :tableList="tableList" :list="arrList" @changeSize="doChangeSize" @changePage="doChangePage" 
                    :bLoading="bLoading" :total="total" :pageSize="queryParams.pageSize" :currentPage="queryParams.pageNum" 
                    isSelect @changeSelect="doChangeSelect" operaMinWidth="100px">
                <template slot-scope="prop">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="doShowDetail(prop.scope)">编辑</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" style="color: #f56c6c;" @click="handleDelete(prop.scope)">强制下架</el-button>
                </template>
            </Table>
        </div>
        <el-dialog
            title="提示"
            :visible.sync="dialog.visible"
            width="50%">
            <el-form ref="dialogForm" :model="dialog.data" label-width="140px">
                <el-form-item label="审核结果：">
                    <el-radio v-model="dialog.choiseStatus" label="2">审核通过</el-radio>
                    <el-radio v-model="dialog.choiseStatus" label="3">审核不通过</el-radio>
                </el-form-item>
                <el-form-item label="未通过理由：" v-if="dialog.choiseStatus === '3'">
                    <el-input v-model="dialog.data.remark" placeholder="请填写未通过审核的理由"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialog.visible = false">取 消</el-button>
                <el-button type="primary" @click="doUpdateStatus">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Table from '../../../components/table/table.vue'
import {apiGetProductBackList,apiEditProductPassAudit,apiEditProductNoPassAudit,apiEditProductMustTakeDown} from '@/api/approval/product.js'
export default{
    components:{
        Table
    },
    data(){
        return{
            dialog:{
                visible:false,
                title:'审核',
                data:{},
            },
            tableList:[
                {
                    prop:'cate',
                    label:"商品类型",
                    render(h){
                        if(this.row.cate === ''){
                            return h('span',null,'-')
                        }else{
                            let cate = this.row.cate
                            let cateName = ''
                            if(cate === 0){
                                cateName = '宠物'
                            }else if( cate === 1){
                                cateName = '其他'
                            }else if(cate === 2){
                                cateName = '服饰'
                            }
                            return h('span',{},cateName)
                        }
                    }
                },
                {
                    prop:'name',
                    label:'商品名称'
                },
                {
                    prop:'mainImage',
                    label:'商品主图',
                    render(h){
                        if(this.row.mainImage === ''){
                            return h('span',null,'-')
                        }else{
                            let imgArr = []
                            let _that = this
                            imgArr.push(this.row.mainImage)
                            let img =  h('el-image',{
                                attrs:{
                                    fit: 'scale-down',
                                    src: _that.row.mainImage,
                                    previewSrcList: imgArr,
                                },
                                style:{
                                    width:'60px',
                                    height:'40px'
                                }
                            },'')
                            let imgList = []
                            imgList.push(img)
                            return h('el-scrollbar',{
                                style:{
                                    height:'60px',
                                    overflow:'hidden'
                                }
                            },imgList)
                        }
                    }
                },
                {
                    prop:'subImages',
                    label:'商品详情图',
                    render(h){
                        if(this.row.subImages === ''){
                            return h('span',null,'-')
                        }else{
                            let imgList = []
                            let imgs = this.row.subImages.split(";")
                            for(var i = 0 ; i < imgs.length ; i++){
                                
                                let reg = /\.(png|jpg|jpeg|webP)$/
                                let regImg = reg.test(imgs[i])
                                let img = ''
                                if(regImg){
                                    img =  h('el-image',{
                                        attrs:{
                                            fit: 'scale-down',
                                            src: imgs[i],
                                            previewSrcList: imgs,
                                        },
                                        style:{
                                            width:'60px',
                                            height:'40px'
                                        }
                                    },'')
                                }
                                if(img !== ''){
                                    imgList.push(img)
                                }
                            }
                            return h('el-scrollbar',{
                                style:{
                                    height:'60px',
                                    overflow:'hidden'
                                }
                            },imgList)
                        }
                    }
                },
                {
                    prop:'price',
                    label:'商品价格'
                },
                {
                    prop:'status',
                    label:'商品状态',
                    render(h){
                        if(this.row.status === ''){
                            return h('span',null,'-')
                        }else{
                            let status = this.row.status
                            let statusName = ''
                            if(status === 0){
                                statusName = '已提交'
                            }else if( status === 1){
                                statusName = '在审核'
                            }else if(status === 2){
                                statusName = '审核通过'
                            }else if( status === 3){
                                statusName = '审核未通过'
                            }else if(status === 4){
                                statusName = '已上架'
                            }else if( status === 5){
                                statusName = '已下架'
                            }else if(status === 6){
                                statusName = '强制下架'
                            }
                            return h('span',{},statusName)
                        }
                    }
                },
                {
                    prop:'createTime',
                    label:'创建时间'
                }
            ],
            arrList:[],
            bLoading:false,
            total:0,
            queryParams:{
                name:'',
                cate:'',
                status:'',
                pageNum:1,
                pageSize:10
            }
        }
    },
    mounted(){
        this.doGetTableData()
    },
    methods:{
        handleDelete(e){
            // e.status = '6'
            let params = JSON.parse(JSON.stringify(e))
            this.$modal.confirm('是否需要强制下架?').then((res)=>{
                if(res === 'confirm'){
                    apiEditProductMustTakeDown(params).then(res=>{
                        this.$modal.msg(res.msg)
                        this.doGetTableData()
                    })
                }
            }).catch(res=>{
                console.log(res)
            })
        },
        doUpdateStatus(){
            if(this.dialog.data.status !== 0 && this.dialog.data.status !== 1){
                this.$modal.msgWarning("当前状态不支持修改")
                return
            }
            let params = JSON.parse(JSON.stringify(this.dialog.data))
            if(this.dialog.choiseStatus == '2'){
                apiEditProductPassAudit(params).then(res=>{
                    this.dialog.visible = false
                    this.doGetTableData()
                })
            }else if(this.dialog.choiseStatus == '3'){
                apiEditProductNoPassAudit(params).then(res=>{
                    this.dialog.visible = false
                    this.doGetTableData()
                })
            }
        },
        doShowDetail(e){
            console.log(e)
            this.dialog.data = e
            this.dialog.visible = true
        },
        refreshData(){
            this.queryParams.name = ''
            this.queryParams.cate = ''
            this.queryParams.status = ''
            this.queryParams.pageSize = 10
            this.queryParams.pageNum = 1
        },
        doChangeSize(e){
            this.refreshData()
            this.queryParams.pageSize = e
            this.doGetTableData()
        },
        doChangePage(e){
            this.refreshData()
            this.queryParams.pageNum = e
            this.doGetTableData()
        },
        // 多选发生变化触发
        doChangeSelect(e){
            console.log(e)
        },
        doGetTableData(){
            let params = JSON.parse(JSON.stringify(this.queryParams))
            apiGetProductBackList(params).then(res=>{
                this.arrList = res.rows.map(item=>{
                    item.id = item.Id
                    return item
                })
                this.total = res.total
                this.bLoading = false
            })
        }
    }
}
</script>

<style scoped lang="scss">
.container{
    width: 100%;
    height: 700px;
    padding: 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    .search{
        ::v-deep{
            .el-form-item el-form-item--medium{
                display: inline-flex;
                width: 25%;
                .el-form-item--medium{
                    width: 80%;
                }
            }
        }
    }
    .btns{
        margin-top: 20px;
    }
    .table{
        width: 100%;
        flex: 1;
    }
}
</style>